$WrapperBgColor: #ffffff;
$LinkedColor: #eee;

@function computed-vw($px) {
    @return $px/1080*100vw;
}

ion-alert.alert-ios {
    .alert-head {
        display: block;
    }

    .alert-sub-title {
        margin-top: 20px !important;
    }
}

page-graphic-unlock {
    .scroll-content {
        overflow-y: hidden;
        padding: 0 !important;
    }

    .toolbar-ios {
        .back {
            width: 7vw;
            height: 8vw;
            display: block;
            background-size: cover;
            background-image: url(../assets/images/client/client-filter/icon_return.png);
            background-repeat: no-repeat;
        }
        .menu {
            width: 6.5vw;
            height: 5.5vw;
            display: block;
            background-size: cover;
            background-image: url(../assets/images/client/client-filter/icon_menu.png);
            background-repeat: no-repeat;
        }
        .toolbar-title-ios {
            .nav-btn {
                height: 100%;
                color: #fff;
                background-color: transparent;
                font-size: 5vw;
                padding: 0;
                width: 87.5px;
                text-align: center;
                &_active {
                    color: rgb(255, 202, 55);
                }
            }
        }
    }
    .container {
        position: absolute;
        top: computed-vw(450);
        padding-top: computed-vw(20);
        width: 100%;
        height: 100%;
        ackground-color: $WrapperBgColor;
        display: flex;
        flex-direction: column;
        user-select: none;
    }

    .smallLockCanvas{
        padding-top: computed-vw(20);
        margin-top: computed-vw(120);
        text-align: center;
    }
    .warp-tip-msg {
        text-align: center;
        height: 30px;
        line-height: 30px;
        vertical-align: middle;
        font-size: computed-vw(42);
        color: #000;
    }

    .warp-small-tip-msg{
        visibility: hidden;
        margin: 0 0 30px 0;
        text-align: center;
        vertical-align: middle;
        //color: #e04343;
        color: #7d0000;
        font-size: computed-vw(36);
    }
    #successTipMsg{
        display: none;
        text-align: center;
        background-color: rgba(0,0,0,0.4);
        border-radius: computed-vw(12);
        width:computed-vw(520) ;
        height: computed-vw(340);
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: computed-vw(-260);
        margin-top:computed-vw(-170);
        .success-icon{
            width: computed-vw(81);
            height: computed-vw(81);
            margin: computed-vw(100) auto computed-vw(33);
            background-image: url(../assets/images/me/Setsuccess.png);
            background-repeat: no-repeat;
            background-size: computed-vw(81) computed-vw(81);
        }
        .success-tip-msg{
            font-size: computed-vw(42);
            color: #ffffff;
            text-align: center;
        }
    }
}
